/* stylelint-disable selector-class-pattern */
$code: (
  'footer-toolbar-height': 36px,
  'footer-button-height': 36px,
);

@include b(code) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  @include e(box) {
    width: 100%;
    height: 100%;
    min-height: 200px;
    overflow: hidden;
  }

  @include e('first-prompt') {
    &::before {
      padding-right: getCssVar(spacing, base);
      content: #{getCssVar('code', 'placeholder')};
    }
  }
}

@include b('code-toolbar') {
  position: absolute;
  top: 4px;
  right: 18px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: end;
  width: auto;
  height: auto;
  padding-right: 0;
  font-size: getCssVar(font-size, header-6);

  &>*+* {
    margin-left: getCssVar(spacing, base-loose);
  }

  @include e(fullscreen) {
    height: 38px;
    padding: 0 12px;
    font-size: getCssVar(font-size, regular);
    font-style: normal;
    line-height: 2.8;
    cursor: pointer;
    
    &:hover {
      background-color: getCssVar(color, bg, 3);
    }
  }
}

@include b('code-footer') {
  @include set-component-css-var('code', $code);

  display: flex;
  align-items: center;
  justify-content: end;
  width: 100%;
  min-height: getCssVar('code', 'footer-toolbar-height');
  margin-top: getCssVar(spacing, base-tight);
  margin-right: getCssVar(spacing, tight);

  &>*+* {
    margin-left: getCssVar(spacing, base);
  }


  @include e('cancel') {
    height: getCssVar('code', 'footer-button-height');
    line-height: getCssVar('code', 'footer-button-height');
    color: #{getCssVar(color, text, 1)};
    cursor: pointer;
    opacity: 0.7;

    &:hover {
      color: #{getCssVar(color, primary)};
      opacity: 1;
    }
  }

  @include e('save') {
    width: 96px;
    height: getCssVar('code', 'footer-button-height');
    line-height: getCssVar('code', 'footer-button-height');
    color: #{getCssVar(color, primary, active, text)};
    text-align: center;
    cursor: pointer;
    background-color: #{getCssVar(color, primary)};
    border-radius: getCssVar(border, radius, small);

    &:hover {
      box-shadow: 0 2px 5px 1px #{getCssVar(color, primary)};
    }
  }
}

@include b('code-message') {
  width: 500px;
  max-width: unset;

  @include e('message-content') {
    @include m('message-tip') {
      color: #{getCssVar(color, text, 3)};
    }
  }

  @include e('message-cancel') {
    color: #{getCssVar(color, text, 1)};
    background-color: transparent;

    &:hover {
      color: #{getCssVar(color, primary)};
      background-color: transparent;
    }
  }

  @include e('message-comfire') {
    background-color: #{getCssVar(color, danger)} !important;

    &:hover {
      box-shadow: 0 2px 5px 1px #{getCssVar(color, danger)};
    }
  }
}

@include b('code-editor-enable') {

  @include set-component-css-var('code', $code);
  
  .#{bem(code__box)} {
    height: 100%;
  }
  &:has(.#{bem(code-footer)}) {
    .#{bem(code__box)} {
      height: calc(100% - getCssVar('code-footer-toolbar-height'));
    }
  }
}

@include b('code-dialog-full-screen') {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;

  .#{bem(code-footer)} {
    #{getCssVarName('code-footer-toolbar-height')}: 68px;
  }


  @include b('code') {
    gap: 0;
    padding: 0 getCssVar(spacing, extra-loose);

    --w-e-toolbar-bg-color: #{getCssVar(color, bg, 0)};

    .#{bem(code-toolbar)} {
      right: calc(getCssVar('spacing-extra-loose') + 18px);
    }

  }

  .el-dialog__header {
    display: none !important;
  }

  .el-dialog__body {
    width: 100%;
    height: 100%;
    padding: 0 0 getCssVar('spacing', 'base');

    &:has(.#{bem(code-footer)}) {
      padding-bottom: 0;
    }
  }
}

@include b('code-footer-dialog') {
  margin-top: 0;
}